import React, { useState, useRef, useEffect, useMemo } from 'react';
import { Button, Modal, Form, Col, Row, TreeSelect, Input, Popover, Radio, InputNumber } from 'antd';
import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
import ModalDialog from '@/components/modalDialog';
import IconSvg from '@/components/IconSvg'; // 引入svg图标组件
import SelectIcon from './selectIcon'; // 封装选择图标的组件

export const MenuDialog = (props) => {
    const [form] = Form.useForm()

    const { isModal, onHandleCancel, onHandleOk, menuData, okText } = props
    const formRef = useRef(null) // 定义提交必填校验的form

    // 确定按钮
    const onFinish = (values) => {
        values.iconValue = formValue.iconValue
        console.log('values -----', values)
        formRef.current.resetFields()
        onHandleOk({ isModalStatus: false, isModalTitle: '' });
    };

    // 取消按钮
    const handleModalCancel = (data) => {
        formRef.current.resetFields()
        onHandleCancel(data)
    };
    const treeData = [
        {
            value: 0,
            title: '主类目',
            children: [
                {
                    value: 1,
                    title: '系统管理',
                    menuParentId: 0,
                    children: [
                        {
                            value: 2,
                            title: '用户管理',
                            menuParentId: 1,
                        },
                        {
                            value: 3,
                            title: '角色管理',
                            menuParentId: 1,
                        },
                        {
                            value: 4,
                            title: '菜单管理',
                            menuParentId: 1,
                        },
                    ],
                },
            ]
        }
    ];
    const [formValue, setFormValue] = useState(menuData);

    const onChange = (newValue: string) => {
        console.log('newValue', newValue)
        // setFormValue({ iconValue: newValue });
    };

    // const [iconValue, setIconValue] = useState('')
    const [popoverOpen, setPopoverOpen] = useState(false)
    const handleOpenChange = (newOpen: boolean) => {
        setPopoverOpen(newOpen);
    };
    const onSelectedIcon = (item) => {
        setFormValue({ iconValue: item })
        setPopoverOpen(false)
    }

    let judgment = null
    if (formValue.iconValue) {
        judgment = (<IconSvg name={formValue.iconValue} style={{ height: '25px', width: '16px', marginRight: '5px' }} />)
    } else {
        judgment = <SearchOutlined />
    }

    // 切换菜单类型
    const changeRadio = (e) => {
        setFormValue({ menuType: e.target.value })
    }

    // 使用插槽
    const contentSlot = (
        <Form
            form={form}
            name="basic"
            // labelCol={{ span: 3 }}
            // wrapperCol={{ span: 19 }}
            initialValues={{ ...menuData }}
            autoComplete="off"
            ref={formRef}
            onFinish={onFinish}
        >
            <Row>
                <Col span={24}>
                    <Form.Item
                        label="上级菜单"
                        name="superiorsValue"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <TreeSelect
                            showSearch
                            style={{ width: '100%' }}
                            key="menuParentId"
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            placeholder="主类目"
                            allowClear
                            onChange={onChange}
                            treeData={treeData}
                        />
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item
                        label="菜单类型"
                        name="menuType"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Radio.Group onChange={changeRadio}>
                            <Radio value={1}>目录</Radio>
                            <Radio value={2}>菜单</Radio>
                            <Radio value={3}>按钮</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                {
                    formValue.menuType !== 3 && (<Col span={24}>
                        <Form.Item
                            label="菜单图标"
                            name="iconValue"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 18 }}
                        >
                            <Popover placement="bottom" content={<SelectIcon onSelectedIcon={onSelectedIcon} />} open={popoverOpen} onOpenChange={handleOpenChange} trigger="click">
                                <Input placeholder="点击选择图标" value={formValue.iconValue} prefix={judgment} readOnly />
                            </Popover>
                        </Form.Item>
                    </Col>)
                }
                <Col span={12}>
                    <Form.Item
                        label="菜单名称"
                        name="menuName"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        rules={[{ required: true, message: '菜单名称不能为空' }]}
                    >
                        <Input placeholder="请输入菜单名称" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="显示顺序"
                        name="orderNum"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        rules={[{ required: true, message: '菜单顺序不能为空' }]}
                    >
                        <InputNumber min={1} placeholder="" size='middle' style={{ width: '100%' }} />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="是否外链"
                        name="isFrame"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        tooltip={{ title: '选择是外链则路由地址需要以`http(s)://`开头', icon: <InfoCircleOutlined /> }}
                    >
                        <Radio.Group>
                            <Radio value={0}>是</Radio>
                            <Radio value={1}>否</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        tooltip={{ title: '访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头', icon: <InfoCircleOutlined /> }}
                        label="路由地址"
                        name="path"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        rules={[{ required: true, message: '路由地址不能为空' }]}
                    >
                        <Input placeholder="请输入路由地址" />
                    </Form.Item>
                </Col>
                {
                    formValue.menuType == 2 && (<Col span={12}>
                        <Form.Item
                            tooltip={{ title: '访问的组件路径，如：`system/user/index`，默认在`views`目录下', icon: <InfoCircleOutlined /> }}
                            label="组件路径"
                            name="element"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 12 }}
                        >
                            <Input placeholder="请输入组件路径" />
                        </Form.Item>
                    </Col>)
                }
                {
                    formValue.menuType == 2 && (<Col span={12}>
                        <Form.Item
                            tooltip={{ title: "控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)", icon: <InfoCircleOutlined /> }}
                            label="权限标识"
                            name="authorityUrl"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 12 }}
                        >
                            <Input placeholder="请输入权限标识" />
                        </Form.Item>
                    </Col>)
                }
                {
                    formValue.menuType == 2 && (<Col span={12}>
                        <Form.Item
                            tooltip={{ title: '访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`', icon: <InfoCircleOutlined /> }}
                            label="路由参数"
                            name="query"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 12 }}
                        >
                            <Input placeholder="请输入路由参数" />
                        </Form.Item>
                    </Col>)
                }
                {
                    formValue.menuType == 2 && (<Col span={12}>
                        <Form.Item
                            label="是否缓存"
                            name="isCache"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 12 }}
                        >
                            <Radio.Group>
                                <Radio value={0}>缓存</Radio>
                                <Radio value={1}>不缓存</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>)
                }
                <Col span={12}>
                    <Form.Item
                        label="显示状态"
                        name="isShow"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        tooltip={{ title: '择隐藏则路由将不会出现在侧边栏，但仍然可以访问', icon: <InfoCircleOutlined /> }}
                    >
                        <Radio.Group>
                            <Radio value={0}>显示</Radio>
                            <Radio value={1}>隐藏</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="菜单状态"
                        name="status"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        tooltip={{ title: '选择停用则路由将不会出现在侧边栏，也不能被访问', icon: <InfoCircleOutlined /> }}
                    >
                        <Radio.Group>
                            <Radio value={0}>正常</Radio>
                            <Radio value={1}>停用</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    )

    return (
        <div className="menuDialog">
            <ModalDialog isModal={isModal} okText={okText} contentSlot={contentSlot} formRef={formRef} handleModalCancel={handleModalCancel} width="800px" />
        </div >
    )
}

export default MenuDialog